/* 本文件仅用于模板组件 */
const templateComponent = Vue.defineComponent({
    name: "templateComponent",
    components: {},
    props: {
        name2: {
            type: Number,
            default: 2
        }
    },
    setup(props, context) {
        const name = Vue.ref("Anne");
        const age = Vue.ref(16);
        const sex = Vue.ref(false);

        const user = Vue.reactive({
            name: "tom",
            sex: true,
            age: 18
        })

        const testFun = () => {
            console.log("我是子级函数");
        }

        // === 生命周期 =========
        Vue.onBeforeMount(() => {
            console.log("载入前、onBeforeMount");
        });
        Vue.onMounted(() => {
            console.log("载入后、onBeforeMount");
        });
        Vue.onBeforeUpdate(() => {
            console.log("更新前、onBeforeMount");
        });
        Vue.onUpdated(() => {
            console.log("更新后、onBeforeMount");
        });
        Vue.onBeforeUnmount(() => {
            console.log("销毁前、onBeforeMount");
        });
        Vue.onUnmounted(() => {
            console.log("销毁后、onBeforeMount");
        });
        Vue.onActivated(() => {
            console.log("缓存组件进入后、onBeforeMount");
        });
        Vue.onDeactivated(() => {
            console.log("缓存组件离开前、onBeforeMount");
        });
        Vue.onErrorCaptured(() => {
            console.log("组件异常、onBeforeMount");
        });

        return {
            props,
            user,
            name,
            age,
            sex,
            testFun
        }
    },
    template: `
        <div class="component">
            <div>我是组件</div>
            <div>{{name}}，{{name2}}</div>
            <el-button @click="testFun" type="primary">点击事件</el-button>
        </div>
    `
})